<template>
  <div>
    <van-row type="flex">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.cat_name" v-for="(item,index) in catesList" :key="index" />
        </van-sidebar>
      </div>
      <div class="right">
        <van-row
          v-for="(item,index) in catesList.length && catesList[activeKey].children"
          :key="index"
        >
          <van-row>
            <van-row type="flex" justify="center" class="ziti">/ {{item.cat_name}} /</van-row>
            <van-row>
              <template>
                <van-grid :border="false" :column-num="3" square gutter="20">
                  <van-grid-item v-for="(item1,index1) in item.children" :key="index1" @click="getOne(item1.cat_id)">
                    <van-image :src="item1.cat_icon" />
                    <span style="font-size:12px;color:#3c3c3c">{{item1.cat_name}}</span>
                  </van-grid-item>
                </van-grid>
              </template>
            </van-row>
          </van-row>
        </van-row>
      </div>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      catesList: [],
      activeKey: 0,
      getOneList:{}
    };
  },
  created() {
    this.getCatesList();
  },
  methods: {
    async getCatesList() {
      const res = await this.$http.get("/categories");
      this.catesList = res.message;
    },
    getOne(id){
      this.$router.push(`/pages/goods_list?cid=${id+''}`)
    }
  }
};
</script>

<style lang="less" scoped>
.left {
  margin-top: 46px;
  margin-bottom: 50px;
  width: 85px;
  height: 716px;
  overflow: auto;
}
.left::-webkit-scrollbar {
  display: none;
}
.right {
  margin-top: 46px;
  margin-bottom: 50px;
  width: 290px;
  height: 716px;
  overflow: auto;
}
.right::-webkit-scrollbar {
  display: none;
}
.ziti {
  font-size: 13px;
  font-weight: 700;
  margin: 15px 0;
  color: #3c3c3c;
}
.van-grid-item {
  text-align: center;
}
.van-image {
  width: 60px;
  height: 60px;
}
</style>